<template>
  <div class="mainContent">
    <a-spin :spinning="spinning">
      <div style="width:90%;margin:0 auto;margin-top: 30px;">
        <a-row>
          <a-col :xs="{ span : 24 }" :sm="{ span:4 }" class="formGroupTitle">退货信息</a-col>
        </a-row>
        <a-form style="margin-bottom: 20px;" layout="inline">
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="商户号">
            <span class="ant-form-text">{{queryDetail.merchantNo}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth"></a-form-item>
          <a-form-item class="formItemWidth"></a-form-item>
          <!-- <a-form-item class='formItemWidth' v-bind="formItemLayout" label="商户名称">
                        <span class="ant-form-text">
                            {{queryDetail.merchantName}}
                        </span>
          </a-form-item>-->
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="交易类型">
            <span class="ant-form-text">{{queryDetail.transName}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="商户单号">
            <span class="ant-form-text">{{queryDetail.merchantOrderNo}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="交易单号">
            <span class="ant-form-text">{{queryDetail.transOrderNo}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="上游单号">
            <span class="ant-form-text">{{queryDetail.externalOrderNo}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="交易日期">
            <span class="ant-form-text">{{queryDetail.transDate}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="交易时间">
            <span class="ant-form-text">{{queryDetail.transTime | timeFilter}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="交易金额">
            <span class="ant-form-text">{{queryDetail.amount | cashfilter}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="交易状态">
            <span class="ant-form-text">{{queryDetail.statusName}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="交易流水号">
            <span class="ant-form-text">{{queryDetail.serialNo}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="交易返回码">
            <span class="ant-form-text">{{queryDetail.responseCode}}</span>
          </a-form-item>
          <a-row>
          <a-form-item style="width:100%" class="formItemWidth" :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }" label="返回码注释">
            <span class="ant-form-text">{{queryDetail.responseMessage}}</span>
          </a-form-item>
          </a-row>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="原交易单号">
            <span class="ant-form-text">
              <router-link
                v-if="queryDetail.type == 'qrcode'"
                :to="`/org/transmanage/${queryDetail.orgiTransNo}/qrcodedetail`"
              >
                <span class="textClass">{{ queryDetail.orgiTransNo}}</span>
              </router-link>
              <router-link
                v-if="queryDetail.type == 'pos'"
                :to="`/org/transmanage/${queryDetail.orgiTransNo}/transquerydetail`"
              >
                <span class="textClass">{{ queryDetail.orgiTransNo}}</span>
              </router-link>
              <router-link
                v-if="queryDetail.type == 'unionpay.qrcode'"
                :to="`/org/transmanage/${queryDetail.orgiTransNo}/Unionpayqrcodedetail`"
              >
                <span class="textClass">{{ queryDetail.orgiTransNo}}</span>
              </router-link>
            </span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="原交易金额">
            <span class="ant-form-text">{{queryDetail.orgiAmount | cashfilter}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="备注">
            <span class="ant-form-text">{{queryDetail.remark}}</span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-if="queryDetail.refund == true || queryDetail.refundResult != null"
            v-bind="formItemLayout"
            label="退货结果"
          >
            <span class="ant-form-text">{{queryDetail.refundResult}}</span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-if="queryDetail.refund == true || queryDetail.refundResult != null"
            v-bind="formItemLayout"
            label="退货备注"
          >
            <span class="ant-form-text">{{queryDetail.refundRemark}}</span>
          </a-form-item>
        </a-form>
        <a-row >
            <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
              >交易凭证</a-col
            >
          </a-row>
          <a-form-item class="formItemWidth"  v-bind="formItemLayout">
            <span class="ant-form-text" v-if="queryDetail.attachRequest.files.length">
              <a-button :loading="downLoading" type="primary" @click="download"
                >交易凭证下载</a-button
              >
            </span>
            <span>
              暂无交易凭证
            </span>
          </a-form-item>
        <a-button style="width:140px;" ghost type="primary" @click="backTransList">
          <a-icon type="double-left" />返回
        </a-button>
      </div>
    </a-spin>
  </div>
</template>

<script>
import { message } from "ant-design-vue";
import api from "@/common/api";
import { error } from "util";
import { fail } from "assert";
import AHideData from "../../common/HideData";

export default {
  name: "orgMyInfo",
  components: {},
  data() {
    return {
      downLoading:false,
      visible: false,
      loading: false,
      spinning: false,
      form: this.$form.createForm(this),
      queryDetail: {},
      pagination: { current: null, total: null },
      reamount: 120,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15, offset: 1 },
          md: { span: 15, offset: 1 },
        },
      },
    };
  },
  watch: {},
  computed: {},
  filters: {
    nameFilter(value) {
      if (value) {
        return "*" + value.substring(1, value.length);
      }
      return "";
    },
    phoneFilter(value) {
      if (value) {
        return (
          value.substring(0, 3) + "****" + value.substring(7, value.length)
        );
      }
      return "";
    },

    timeFilter: function (value) {
      if (value) {
        let year = value.substring(0, 2);
        let mouth = value.substring(2, 4);
        let day = value.substring(4, 6);
        return year + ":" + mouth + ":" + day;
      }
    },
    AccountNofilter(value) {
      if (value) {
        var reg = /.*(.{4})$/;
        return value.replace(reg, "**** **** **** ***$1");
      }
    },
    AccountTypefilter(value) {
      if (value == "C") {
        return "贷记卡";
      } else if (value == "D") {
        return "借记卡";
      }
    },
    cashfilter(value) {
      if (value) {
        return parseFloat(value / 100).toFixed(2) + "元";
      } else {
        return "0.00元";
      }
    },
  },
  mounted() {},
  activated() {
    let id = this.$route.params.id;
    this.getQueryDetail(id);
  },
  methods: {
    getQueryDetail(id) {
      this.$axios.get("/agent/transaction/transList/refund/detail/" + id).then(
        (res) => {
          console.log(res);
          if (res.data.code == "OK") {
            this.queryDetail = res.data.data;
          }
        },
        (err) => {}
      );
    },
    fullRefund() { },
    download() {
      this.downLoading = true;
      console.log("attachRequest", this.queryDetail.attachRequest);

      this.$axios
        .post("/file/file/attach", this.queryDetail.attachRequest)
        .then(
          (res) => {
            this.downLoading = false;
            console.log("res", res);
            //   console.log("res.data.data:",res.data.data);
            if (res.data.data != null) {
              window.location.href = res.data.data;
            } else {
              this.$message.error("附件不存在");
            }
          },
          (err) => {
            this.downLoading = false;
            this.$message.error(err.message);
          }
        );
    },
    backTransList() {
      this.$router.push("/org/transmanage/transquery");
    },
  },
};
</script>

<style lang="less" scoped>
.card_sty {
  margin-bottom: 30px;
}

.mainContent {
  overflow-y: scroll;
  height: 100%;
  padding: 30px;
}

/* 滚动条样式 */
.mainContent::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

span {
  cursor: pointer;
}

.formItemWidth {
  width: 30%;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  margin-top: 15px;
  text-align: left;
  /* margin-left: 20px; */
}

.ant-card-head-title {
  padding: 12px 0 !important;
}

.ant-card-grid {
  padding: 12px;
}

.ant-card-head {
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 24px;
  border-radius: 2px 2px 0 0;
  zoom: 1;
  margin-bottom: -1px;
  min-height: 45px !important;
  font-size: 16px;
  color: #52506b;
  font-weight: 400;
  display: flex;
}

.ant-card .ant-card-grid:nth-child(4n + 1),
.ant-card .ant-card-grid:nth-child(4n + 2) {
  background: #f7f9fc;
}

.ant-card-grid:hover {
  /* box-shadow: none; */
  box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
    1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
}
.button_sty {
  width: 140px;
  margin-top: 30px;
}
.refund {
  color: #1890ff;
  cursor: pointer;
}
</style>